<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性操作</title>
    <style>
        .cls{
            color:red;
        }
    </style>
</head>
<body>
    <div>
        <h1 id="h" title="这是一个标题" data-name="自定义属性">标题</h1>
    </div>
    <script>
        
        let h = document.getElementById("h");
        // attributes：获取元素中所有属性节点，它可以用下标值或属性名来获取
        console.log(h.attributes);
        console.log(h.attributes["title"]);

        // getAttribute：根据属性名获取属性值
        console.log(h.getAttribute("title"));
        // setAttribute：设置属性名和对应的属性值
        h.setAttribute("title","更新title内容");

        // 直接通过点运算符获取或者设置属性
        console.log(h.title);
        h.title = "再次更新title";
        // 注意：class和for属性必须使用className和htmlFor来替代
        h.className = "cls";

        // 在H5当中规定自定义属性需要使用"data-属性名"的方式来设置
        // 在DOM操作当中自定义属性可以使用"dataset.属性名"的方式来访问或修改
        console.log(h.dataset.name);
        h.dataset.name = "更改自定义属性";
    </script>
</body>
</html>